<template>
  <div>
    <section class="section_0307" v-for="(item,key) in items" :key="key">
      <i class="icon_0307"><span class="span_0307">求</span></i>
      <div class="dataWrap_0307">
        <div class="itemWrap_0307" @click="personClick(item.AskToSeeId)">
          <dl class="item_0307">
            <dt class="face_0307" :style="{background:'url('+item.User.HeadUrl + ') no-repeat center'}">
              <span v-for="tag in item.Tallys">{{tag}}</span>
            </dt>
            <dd class="text_0307 item_0307"><span class="name_0307">{{item.User.Name}}</span><p class="info_0307">{{item.User.SelfSignature}}</p></dd>
          </dl>
        </div>
        <div class="itemWrap_0307" @click="toHomeSwiper(item.AskToSeeId)" v-for="list in item.AskToSes">
          <div class="item_0307 itemImg_0307" :style="{background:'url('+list.PicUrl + ') no-repeat center'}">
            <p class="Pinfo_0307">{{list.Title}}</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  props:{
    items:{

    }
  },
  data () {
    return {
      text:['行','求',''],
      classArr: ["label_1","label_2","label_3"],
    }
  },
  methods: {
    personClick(infoId){
      this.$router.push({ path: "personDetails", query: { infoId:infoId } });
    },
    // 跳到轮播页面
    toHomeSwiper(infoId) {
      this.$router.push({ path: "classRoomDetails", query: { AskToSeeId:infoId } });
    },
  }
}

</script>
<style lang="less">
  .section_0307 {
    height: 1.73rem;
    width: 100%;
    border-top-left-radius: .1rem;
    border-bottom-left-radius: .1rem;
    position: relative;
    overflow-y: hidden;
    margin-bottom: .1rem;
    .icon_0307 {
      font-style: normal;
      display: block;
      width: 0;
      height: 0;
      border-width: .3rem;
      border-color: #EBEBEB transparent transparent #EBEBEB;
      border-style: solid;
      border-top-left-radius: .1rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      .span_0307 {
        position: absolute;
        left: -.2rem;
        top: -.2rem;
        color: white;
        font-size: .18rem;
      }
    }
    .dataWrap_0307 {
      height: 1.73rem;
      padding: .1rem;
      width: 100%;
      background: white;
      overflow-x: auto;
      display: flex;
      box-sizing: border-box;
      .itemWrap_0307 {
        .itemImg_0307 {
          display: flex;
          justify-content: center;
          align-items: center;
          background: #656565;
          background-size: cover!important;
         .Pinfo_0307 {
            color: white;
            font-size: .15rem;
            line-height: .21rem;
            font-weight: bold;
            padding: .53rem .38rem .58rem .14rem!important;
          }
        }
        .item_0307{
          width: 1.53rem;
          height: 1.53rem;
          background: #EFEFF4;
          margin-right: .1rem;
          position: relative;
          .info_0307{
            width: 1.1rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .face_0307 {
            width: 100%;
            height: 1.28rem;
            background: url(../../assets/img/person/2.jpg) center center;
            background-size: cover;
            background-repeat: no-repeat;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            span {
              padding: .05rem .08rem;
              background: #656565;
              border-radius: .04rem;
              display: inline-block;
              position: absolute;
              text-align: center;
              color: white;
              left: 50%;
              top: 30%;
            }
          }
          .text_0307 {
            display: flex;
            align-items: center;
            padding: 0;
            height: .25rem;
            .name_0307 {
              font-size: .14rem;
              color: #39393D;
              font-weight: bold;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              text-align: center;
              width: .43rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .label_1 {
              span:nth-of-type(1) {
                top: .24rem;
                left: .87rem;
              }
              span:nth-of-type(2) {
                top: .68rem;
                left: .60rem;
              }
            }
            .label_2 {
              span:nth-of-type(1) {
                top: .6rem;
                left: .28rem;
              }
              span:nth-of-type(2) {
                top: .91rem;
                left: .78rem;
              }
            }
            .label_3 {
              span:nth-of-type(1) {
                top: .41rem;
                left: .76rem;
              }
              span:nth-of-type(2) {
                top: .68rem;
                left: .31rem;
              }
            }


        }
      }
    }
  }
</style>
